<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body
      ref="mescrollRef"
      :sticky="true"
      @init="mescrollInit"
      :down="{ native: true }"
      :up="upOption"
      @up="upCallback"
    >
      <view class="list">
        <view class="item" v-for="(item, index) in record" :key="index">
          <view class="top">
            <view class="stretch">
              <view class="icon">
                <image :src="$image(item.icon || '/storeminiapp/coupon_verify_default.png')"></image>
              </view>
              <view class="text">
                <view class="name">{{ item.couponName }}</view>
                <view class="date">{{ item.verifyTime }}</view>
              </view>
            </view>
            <view class="status">
              <u-button
                type="primary"
                :custom-style="customStyle"
                :disabled="item.verifyStatus === VERIFY_STATUS.ALREADY"
                @click="$confirm(() => handleCancel(item), {content: '撤销后不可恢复，确认撤销核销吗？'} ) "
              >{{ item.verifyStatus === VERIFY_STATUS.NOT ? '撤销核销' : '已撤销核销' }}</u-button>
            </view>
          </view>
          <view class="bottom">
            <view class="ele">
              <text>核销流水号</text>
              <text class="m-l-10">{{ item.orderId }}</text>
            </view>
            <view class="ele" @click="handleMore(item)">
              <text>详情信息</text>
              <text class="iconfont" :class="[ item.isMore ? 'icon-arrow-down' : 'icon-arrow-right' ]"></text>
            </view>
          </view>
          <view class="more-wrap" v-if="item.isMore">
            <block v-if="item.descInfo">
              <view class="desc">
                <text>该券为{{ formatScope(item.descInfo.goodsScope) }}</text>
                <text v-if="item.descInfo.sceneType !== 2">，满{{item.descInfo.minConsumeValue}}减{{item.descInfo.maxDiscountValue}}</text>
              </view>
              <view class="desc">使用场景：{{ formatUseScene(item.descInfo.sceneType) }}</view>
              <view class="desc" v-if="item.descInfo.description">券描述：{{item.descInfo.description}}</view>
              <view class="desc">使用门店：</view>
              <view class="desc">{{ item.couponUseShopName }}</view>
            </block>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
import * as CouponApi from '@/api/order/coupon'
import store from "@/store"
import CouponTypeEnum from "@/common/enum/couponType"

const VERIFY_STATUS = {
  NOT: 1, // 未撤销
  ALREADY: 2 // 已撤销
}

export default {
  name: "index",
  mixins: [MescrollMixin],
  data() {
    return {
      VERIFY_STATUS,
      CouponTypeEnum,
      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: { size: 10 },
        // 数量要大于3条才显示无更多数据
        noMoreSize: 3,
        empty: {
          tip: '无券核销记录！'
        }
      },
      record: getEmptyPaginateObj(),
      customStyle: {
        height: '64rpx',
        padding: '12rpx 24rpx'
      },
    }
  },
  computed: {
    store() {
      return store.getters.store
    },
    counter() {
      return store.getters.counter
    }
  },
  onLoad() {
  },
  methods: {
    // 刷新列表
    onRefreshList() {
      this.record = getEmptyPaginateObj()
      setTimeout(() => this.mescroll.resetUpScroll(), 120)
    },
    /**
     * 上拉加载的回调 (页面初始化时也会执行一次)
     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
     * @param {Object} page
     */
    upCallback(page) {
      this.getCouponList(page.num)
        .then(res => {
          const curPageLen = res.length
          this.mescroll.endBySize(curPageLen)
        })
        .catch(() => this.mescroll.endErr())
    },

    /**
     * 获取订单评价列表
     * @param {Number} current 页码
     */
    getCouponList(current = 1) {
      return new Promise((resolve, reject) => {
        CouponApi.page({
          verifyShopId: this.store.id,
          verifyStoreId: this.counter.storeId || '',
          channel: CouponTypeEnum.OFFLINE.value,
          current
        }, { load: false })
          .then(result => {
            const newList = result.data
            this.record = getMoreListData(newList, this.record, current)
            resolve(newList)
          })
          .catch(reject)
      })
    },
    // 撤销核销
    handleCancel(item) {
      CouponApi.cancel({
        verifyCode: item.verifyCode
      }).then(({ data }) => {
        if (data) {
          this.$toast('操作成功')
          this.onRefreshList()
        }
      }).catch(() => {})
    },
    async handleMore(item) {
      item.isMore = !item.isMore
      if (!item.isMore) return
      const { data } = await CouponApi.detail({ couponNo: item.couponNo })
      if (data) item.descInfo = data
      const { data: shops } = await CouponApi.shops(item.couponTplId)
      if (shops?.length) {
        item.couponUseShopName = shops.map(item => item.shopName).join('、')
      }
    },
    /**
     * 获取优惠券商品范围
     * @param val
     */
    formatScope(val) {
      switch (val) {
        case 1:
          return '单品券'
        case 2:
          return '品类券'
        case 3:
          return '部分可用券'
        case 4:
          return '部分不可用券'
        case 5:
          return '全场券'
      }
      return ''
    },
    /**
     * 转换优惠券使用场景
     * @param val
     */
    formatUseScene(val) {
      switch (val) {
        case 1:
          return '线上使用'
        case 2:
          return '线下使用'
        case 3:
          return '线上使用/线下使用'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .list {

    .item {
      border-radius: 16rpx;
      background: #fff;
      padding: 24rpx;
      margin-bottom: 16rpx;

      .top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .stretch {
          display: flex;
          align-items: stretch;

          .icon {
            width: 116rpx;
            height: 116rpx;
            flex-shrink: 0;
            margin-right: 24rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
          }

          .text {
            display: flex;
            flex-direction: column;

            .name {
              font-size: 28rpx;
              font-weight: bold;
            }

            .date {
              font-size: 24rpx;
              color: #999;
              margin-top: auto;
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24rpx;
        padding-top: 24rpx;
        border-top: dashed 1rpx var(--eeeeee, #EEE);

        .ele {
          font-size: 24rpx;
          color: #999999;
          display: flex;
          align-items: center;

          .iconfont {
            margin-left: 10rpx;
            font-size: 30rpx;
          }
        }
      }

      .more-wrap {
        margin-top: 20rpx;

        .desc {
          font-size: 24rpx;
          color: #999999;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
